<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../static/css/login.css" />
  <title>注册</title>
  <script src="../../static/js/common.js"></script>
  <script src="../../static/js/jquery-3.6.3-min.js"></script>
</head>

<body>
  {% csrf_token %}
  <div class="fu_div">
    <div class="login">
      <h2>用户注册</h2>
      <hr class="login_hr" />
      <div class="login_box">

        <input type="text" id="uname">
        <label for="uname">用户名</label>
      </div>

      <div class="login_box">
        <input type="password" id="pwd">
        <label for="pwd">密码: </label>
      </div>
      <div class="login_box">
        <input type="password" id="pwd1">
        <label for="pwd1">确认密码: </label>
      </div>
      <div class="login_box">
        <input type="text" id="unames">
        <label for="unames">昵称: </label>
      </div>
      <span id="show" style="color: red;"></span>
      <div class="btn_fu">
        <p><button id="btn" class="submit_btn">注册</button></p>
      </div>
    </div>
  </div>

  <!-- <script src="../../static/js/login.js"></script> -->
  <script>
    $(function () {
      // 绑定鼠标移开事件
      /*$('#uname').blur(function () {
        var xhr = createXhr();
        var url = '/user/checkuname/?uname=' + $(this).val()
        console.log(url)
        xhr.open('get', url, true);
        // 回调
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {

            $('#show').text(xhr.responseText);
          }
        }
        xhr.send();

      });*/

      function checkuname() {
        var ret = true;
        var xhr = createXhr();
        var url = '/user/checkuname/?uname=' + $('#uname').val();
        xhr.open('get', url, false); // 这里检测用户名不能使用异步,否则ret后续等不到服务器返回结果,一直卡在true状态
        // 回调
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {

            // 判断一下服务器返回值
            if (xhr.responseText == '0') {
              ret = false;
              $('#show').text('用户已存在!!!');
            } else if (xhr.responseText == '2') {
              $('#show').text('账号不能为空或不能小于6位数!');
            } else {
              $('#show').text('ok');
            }

            // $('#show').text(xhr.responseText);
          }
        }
        xhr.send();
        return ret
      }


      $('#uname').blur(function () {
        checkuname()
      })

      $('#btn').click(function () {
        if (checkuname() == false) {
          $('#show').text('用户已存在!!!');
          return
        }
        //console.log(111)
        // 完成post注册
        var xhr = createXhr();
        var name = $('#uname').val();
        var pwd = $('#pwd').val();
        var pwd1 = $('#pwd1').val();
        var unames = $('#unames').val();
        var csrf_name = $("[name='csrfmiddlewaretoken']").val(); // jq属性选择器
        var url = '/user/make_post/';
        xhr.open('post', url, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            if (xhr.responseText == '1') {
              $('#show').text('注册成功!');
            }
            else if (xhr.responseText == '2') {
              $('#show').text('给自己取个名字吧!');
            }
            else if (xhr.responseText == '0') {
              $('#show').text('两次密码不一致或者为空或者密码长度少于6位数');
            }
            else if (xhr.responseText == '4') {
              $('#show').text('注册失败,请稍候重试!!!');
            }
            else {
              $('#show').text('用户名不能为空哟!');
            }

          }
        }

        // 拼接Ajax的post表单提交的参数
        var parmas = 'uname=' + name + '&pwd=' + pwd + '&pwd1=' + pwd1 + '&csrfmiddlewaretoken=' + csrf_name + '&unames=' + unames
        xhr.send(parmas)
      })
    });
  </script>
</body>

</html>